<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>词汇量检测</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>

		<view class="pageContent" v-else>
			<view class="pageContent_title" v-if="!is_start">—— 测试时间约5~8分钟 ——</view>
			<view class="pageContent_progress" v-if="is_animation">
				<view class="progress-bar-container">
					<view class="progress-bar" :style="{ 'animation-duration': countdown_duration + 's' }"></view>
				</view>
				<view class="set_duration">
					<image :src='STATIC_URL+"112.png"' mode=""></image>
					<text>{{countdownNum}}s</text>
				</view>
			</view>
			<view class="pageContent_word">{{wordItem.title}}</view>
			<view class="pageContent_options">
				<view class="pageContent_options_view" v-for="(item, index) in wordItem.options" @tap.stop="selectOptions(index)">
					<text>{{item.options_id}}：{{item.options_title}}</text>
					<template v-if="is_start">
						<image v-if="item.isChange == 1" :src='STATIC_URL+"10.png"' mode=""></image>
						<image v-if="item.isChange == 0" :src='STATIC_URL+"11.png"' mode=""></image>
						<!-- <image :src='STATIC_URL+"37.png"' mode=""></image> -->
					</template>
				</view>
			</view>
			<view class="pageContent_btn_view">
				<view class="pageContent_btn" v-if="!is_start" @tap.stop="startEvaluation">开始测评</view>
				<template v-if="is_animation">
					<view class="pageContent_btn" @tap.stop="confirm">确定【下一题】</view>
					<view class="pageContent_btn_no" @tap.stop="willNot">不会</view>
				</template>
			</view>
		</view>
		
		
		<uv-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<view class="video_title">提示</view>
					<view class="video_text">
						<view class="video_text_1">恭喜您完成词汇量检测!</view>
					</view>
					<view class="input_bottom">
						<view class="input_bottom_1" @click="show = false">取消</view>
						<view class="input_bottom_2" @click="confirmBtn">确定</view>
					</view>
				</view>
			</view>
		</uv-overlay>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"loadingText": '努力加载中',
				"loadmoreText": '轻轻上拉',
				"nomoreText": '没有更多了',
				"isShow": true,

				show: false,
				countdown_duration: 0,  // 答题的倒计时时间
				countdownNum: 0,  // 倒计时秒数
				error_num: 0,  // 达到错误的题数
				make_num: 0,  // 当前做的错误题数
				word_output_data: [],  // 正常的题目列表
				word_output_error_data: [],  // 错误的替补题目列表
				is_start: false,  // 开始答题
				is_animation: false,  // 开始倒计时
				wordItem: {},  // 每一项需要做的单词
				cate_id: "",  // 阶段id
				timer: null,
				current: 0,  // 数据index值
				answer_num: 0,  // 当前阶段答对的题目数量
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getVocabulary();
		},
		onUnload() {
			this.stopProgress();
		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			
		},
		// 上拉加载
		onReachBottom() {
			
		},
		onPageScroll(e) {

		},
		methods: {
			// 获取词汇量列表  post65e561cd793d2
			getVocabulary() {
				this.current = 0;
				this.answer_num = 0;
				this.$api.post(global.apiUrls.post65e561cd793d2, {
					cate_id: this.cate_id ? this.cate_id : ""
				}).then(res => {
					this.isShow = false;
					// console.log(res);
					if (res.data.code == 1) {
						this.countdown_duration = res.data.data.countdown_duration;
						this.countdownNum = res.data.data.countdown_duration;
						this.error_num = res.data.data.error_num;
						this.word_output_data = res.data.data.word_output_data;
						this.word_output_error_data = res.data.data.word_output_error_data;
						if (this.word_output_data.length > 0) {
							this.cate_id = this.word_output_data[0].cate_id;
							this.wordItem = this.word_output_data[this.current];
							if (this.wordItem.options.length > 0) {
								this.wordItem.options.forEach((v ,k) => {
									v.isChange = 0;
								})
							}
						}
						if (this.cate_id > 1) {
							this.is_animation = false;
							setTimeout(() => {
								this.is_animation = true;
								this.startTimer();
							}, 50)
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 开始测评
			startEvaluation() {
				this.is_start = true;
				this.is_animation = true;
				this.startTimer();
			},
			startTimer() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				this.timer = setInterval(() => {
					this.countdownNum = this.countdownNum - 1;
					if (this.countdownNum == 0) {
						clearInterval(this.timer);
						let index = 0;
						index = this.wordItem.options.filter(u => u.isChange == 1).length;
						if (index > 0) {
							this.confirm();
						} else {
							this.willNot();
						}
						this.endTimer();
					}
				}, 1000)
			},
			endTimer() {
				if (this.current < this.word_output_data.length -1) {
					this.current += 1;
					this.wordItem = this.word_output_data[this.current];
					if (this.wordItem.options.length > 0) {
						this.wordItem.options.forEach((v ,k) => {
							v.isChange = 0;
						})
					}
					this.countdownNum = this.countdown_duration;
					this.is_animation = false;
					setTimeout(() => {
						this.is_animation = true;
						this.startTimer();
					}, 50)
				} else {
					if (this.timer) {
						clearInterval(this.timer);
						this.timer = null;
					}
					if (this.cate_id == 14) {
						this.show = true;
					} else {
						this.getVocabulary();
					}
				}
			},
			selectOptions(index) {
				if (!this.is_start) return;
				this.wordItem.options.forEach((v ,k) => {
					v.isChange = 0;
				})
				this.wordItem.options[index].isChange = 1;
				this.$forceUpdate();
			},
			confirm() {
				let index = 0;
				let correct = false;
				index = this.wordItem.options.filter(u => u.isChange == 1).length;
				if (index == 0) return this.$message.info('请选择答案');
				this.wordItem.options.forEach((v ,k) => {
					if (v.isChange == 1 && v.options_value == 1) {
						correct = true;
						this.answer_num += 1;
						console.log(11111111);
					}
				})
				if (correct) {
					this.endTimer();
				} else {
					this.make_num += 1;
					if (this.error_num != 0) {
						this.error_num = this.error_num - 1;
						let item = this.word_output_error_data[0];
						this.word_output_data.push(item);
						this.word_output_error_data.shift();
						this.endTimer();
					} else {
						this.stopProgress();
						this.$message.info('答题结束');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/vocabularyDetection/evaluationReport?cate_id=' + this.cate_id + '&answer_num=' + this.answer_num
							})
						}, 800)
					}
				}
				// console.log('自己做的错题数：',this.make_num);
				// console.log('设置的错题数：', this.error_num);
			},
			willNot() {
				this.make_num += 1;
				if (this.error_num != 0) {
					this.error_num = this.error_num - 1;
					let item = this.word_output_error_data[0];
					this.word_output_data.push(item);
					this.word_output_error_data.shift();
					this.endTimer();
				} else {
					this.stopProgress();
					this.$message.info('答题结束');
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/vocabularyDetection/evaluationReport?cate_id=' + this.cate_id + '&answer_num=' + this.answer_num
						})
					}, 800)
				}
				// console.log('自己做的错题数：',this.make_num);
				// console.log('设置的错题数：', this.error_num);
			},
			stopProgress() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			// 弹窗确定
			confirmBtn() {
				
			},
		}
	};
</script>
<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 450rpx;
		height: 269rpx;
		border-radius: 10rpx;
		background-color: #fff;
		text-align: center;
		position: relative;
	}
	
	.input_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1px solid #dddddd;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	
		.input_bottom_1 {
			width: 50%;
			text-align: center;
			font-size: 25rpx;
			color: #999999;
		}
	
		.input_bottom_2 {
			width: 50%;
			text-align: center;
			font-size: 25rpx;
			color: #4087FD;
		}
	}
	.video_title {
		padding-top: 40rpx;
		font-size: 28rpx;
	}
	.video_text {
		padding: 38rpx 0 0;
		text-align: center;
	
		.video_text_1 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	
		.video_text_2 {
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
		}
	
		.video_text_3 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top: 1px solid #dddddd;
			padding: 20rpx;
			color: #4087FD;
			font-size: 25rpx;
		}
	}
	.progress-bar-container {
		width: 100%;
		height: 16px;
		background-color: #f5f5f5;
		border-radius: 10px;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background-color: #007aff;
		border-radius: 10px;
		width: 0;
		animation-name: example;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}

	@keyframes example {
		0% {
			width: 0;
		}

		100% {
			width: 100%;
		}
	}
	.set_duration {
		background: #f8f8f8;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 48rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
	}

	.pageContent {
		background: #fff;
		border-radius: 10rpx;
		margin: 16rpx 25rpx 0;
		padding: 60rpx 40rpx;

		.pageContent_title {
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #4087FD;
			font-size: 28rpx;
			background: #F0F6FF;
		}

		.pageContent_progress {
			height: 70rpx;
		}

		.pageContent_word {
			color: #4087FD;
			font-size: 58rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 80rpx 0 56rpx;
		}

		.pageContent_options {
			padding: 0 50rpx;

			.pageContent_options_view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 0;
				border-bottom: 1px solid #DDDDDD;
				color: #666666;
				font-size: 28rpx;
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.pageContent_btn_view {
			padding: 0 50rpx;
			.pageContent_btn {
				width: 100%;
				height: 80rpx;
				background: #4087FD;
				color: #fff;
				font-size: 28rpx;
				// margin: 0 50rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 80rpx;
			}
			.pageContent_btn_no {
				width: 100%;
				height: 80rpx;
				background: #F8F8F8;
				color: #333;
				font-size: 28rpx;
				// margin: 0 50rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 24rpx;
			}
		}
	}

	.intensify {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;

		.intensify_item {
			padding: 20rpx;

			// border-bottom: 1px solid #eee;
			.item_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;

				.date_text {
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.item_content {
				display: flex;
				align-items: center;

				.item_num {
					width: 55rpx;
					height: 55rpx;
					background: #f8f8f8;
					border-radius: 50%;
					position: relative;

					.item_num_img {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}

					.item_num_text {
						font-size: 13rpx;
						font-weight: bold;
						line-height: 52rpx;
						text-align: center;
						color: #fff;
						position: relative;
						z-index: 10;
					}
				}

				.item_text {
					width: calc(100% - 55rpx);
					padding-left: 15rpx;

					.item_content_1 {
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.item_content_2 {
						margin-top: 10rpx;
						font-size: 15rpx;
						color: #999999;
					}
				}

			}
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 135rpx;

		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}

		.active_item {
			color: #4087FD;
			font-weight: bold;
		}

		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>